{% block sw_order_document_card %}
<mt-card
    v-if="!isDataLoading"
    position-identifier="sw-order-document-card"
    :title="$tc('sw-order.documentCard.cardTitle')"
    :class="documentCardStyles"
    :is-loading="isDataLoading"
    class="sw-order-detail-base__document-grid"
>
    <template #grid>
        {% block sw_order_document_card_header %}
        <sw-card-section
            divider="bottom"
            :secondary="showCardFilter"
            slim
        >

            {% block sw_order_document_card_header_filter %}
            <sw-card-filter
                v-if="showCardFilter"
                :placeholder="$tc('sw-order.documentCard.searchBarPlaceholder')"
                @sw-card-filter-term-change="onSearchTermChange"
            >

                <template #filter>
                    {% block sw_order_document_card_header_create_document_context_button %}
                    <mt-button
                        v-if="!attachView"
                        v-tooltip="{
                            message: tooltipCreateDocumentButton,
                            disabled: acl.can('document.viewer') && !isEditing,
                            showOnDisabledElements: true
                        }"
                        size="small"
                        ghost
                        :disabled="!acl.can('document.viewer') || isEditing"
                        class="sw-order-document-grid-button"
                        variant="secondary"
                        @click="onShowSelectDocumentTypeModal"
                    >

                        {% block sw_order_document_card_header_create_document_button_label %}
                        {{ $tc('sw-order.documentCard.labelCreateNew') }}
                        {% endblock %}

                    </mt-button>
                    {% endblock %}

                </template>
            </sw-card-filter>
            {% endblock %}

        </sw-card-section>
        {% endblock %}

        {% block sw_order_document_card_grid %}
        <sw-data-grid
            v-if="!documentsEmpty"
            :data-source="documents"
            :columns="getDocumentColumns"
            :full-page="false"
            :show-settings="false"
            :show-selection="false"
            :show-actions="!attachView"
            :is-loading="isLoading"
            :allow-column-edit="false"
            :allow-inline-edit="false"
            identifier="sw-order-document-grid"
        >

            {% block sw_order_document_card_grid_column_date %}
            <template #column-createdAt="{ item }">
                {% block sw_order_document_card_grid_column_date_label %}
                {{ dateFilter(item.createdAt, { hour: '2-digit', minute: '2-digit' }) }}
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_order_document_card_grid_column_avaiable_formats %}
            <template #column-fileTypes="{ item }">
                {% block sw_order_document_card_grid_column_available_formats_label %}
                {{ availableFormatsFilter(item) }}
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_order_document_card_grid_column_sent %}
            <template #column-sent="{ item }">
                {% block sw_order_document_card_grid_column_sent_label %}
                <sw-data-grid-column-boolean
                    v-model:value="item.sent"
                    :is-inline-edit="false"
                />
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_order_document_card_grid_column_attach %}
            <template
                v-if="attachView"
                #column-attach="{ item }"
            >
                {% block sw_order_document_card_grid_column_attach_label %}
                <sw-data-grid-column-boolean
                    v-model:value="item.attach"
                    :is-inline-edit="true"
                />
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_order_document_card_grid_actions %}
            <template
                v-if="!attachView"
                #actions="{ item }"
            >
                {% block sw_order_document_card_grid_action_open %}
                <sw-context-menu-item
                    :disabled="!acl.can('document.viewer')"
                    class="sw-order-document-card__context-button-open-pdf"
                    @click="onOpenDocument(item.id, item.deepLinkCode, item.documentMediaFile?.fileExtension)"
                >
                    {% block sw_order_document_card_grid_action_open_label %}
                    {{ $tc('sw-order.documentCard.labelOpenDocument') }}
                    {% endblock %}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_order_document_card_grid_action_download %}
                <sw-context-menu-item
                    :disabled="!acl.can('document.viewer')"
                    class="sw-order-document-card__context-button-download-pdf"
                    @click="onDownload(item.id, item.deepLinkCode, item.documentMediaFile?.fileExtension)"
                >
                    {% block sw_order_document_card_grid_action_download_label %}
                    {{ $tc('sw-order.documentCard.labelDownloadPdf') }}
                    {% endblock %}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_order_document_card_grid_action_send %}
                <sw-context-menu-item
                    :disabled="!acl.can('document.viewer') || !acl.can('api_send_email')"
                    class="sw-order-document-card__context-button-send"
                    @click="onSendDocument(item.id)"
                >
                    {% block sw_order_document_card_grid_action_send_label %}
                    {{ $tc('sw-order.documentCard.labelSendDocument') }}
                    {% endblock %}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_order_document_card_grid_action_mark_sent %}
                <sw-context-menu-item
                    :disabled="!acl.can('document.viewer') || item.sent"
                    class="sw-order-document-card__context-button-mark-sent"
                    @click="onMarkDocumentAsSent(item.id)"
                >
                    {% block sw_order_document_card_grid_action_mark_sent_label %}
                    {{ $tc('sw-order.documentCard.labelMarkAsSent') }}
                    {% endblock %}
                </sw-context-menu-item>
                {% endblock %}

                {% block sw_order_document_card_grid_action_mark_unsent %}
                <sw-context-menu-item
                    :disabled="!acl.can('document.viewer') || !item.sent"
                    class="sw-order-document-card__context-button-mark-unsent"
                    @click="onMarkDocumentAsUnsent(item.id)"
                >
                    {% block sw_order_document_card_grid_action_mark_unsent_label %}
                    {{ $tc('sw-order.documentCard.labelMarkAsUnsent') }}
                    {% endblock %}
                </sw-context-menu-item>
                {% endblock %}
            </template>
            {% endblock %}

        </sw-data-grid>
        {% endblock %}

    </template>

    {% block sw_order_document_card_grid_column_modal %}
    <div v-if="showModal">
        <component
            :is="documentModal"
            :current-document-type="currentDocumentType"
            :order="order"
            :is-loading-document="isLoadingDocument"
            :is-loading-preview="isLoadingPreview"
            @loading-document="onLoadingDocument"
            @loading-preview="onLoadingPreview"
            @page-leave="onCancelCreation"
            @document-create="onCreateDocument"
            @preview-show="onPreview"
        />
    </div>
    {% endblock %}

    {% block sw_order_document_card_grid_column_document_type_modal %}
    <sw-order-select-document-type-modal
        v-if="showSelectDocumentTypeModal"
        v-model:value="currentDocumentType"
        :order="order"
        @modal-close="onCloseSelectDocumentTypeModal"
    />
    {% endblock %}

    {% block sw_order_document_card_grid_column_document_send_modal %}
    <sw-order-send-document-modal
        v-if="showSendDocumentModal"
        :document="sendDocument"
        :order="order"
        @modal-close="onCloseSendDocumentModal"
        @document-sent="onDocumentSent"
    />
    {% endblock %}

    {% block sw_order_document_card_empty_state %}
    <sw-empty-state
        v-if="documentsEmpty"
        :title="emptyStateTitle"
        :show-description="false"
        :absolute="false"
    >/
        <template #icon>
            <img
                :src="assetFilter('/administration/administration/static/img/empty-states/order-empty-state.svg')"
                :alt="$tc('sw-order.list.messageEmpty')"
            >
        </template>

        <template #actions>
            <mt-button
                v-if="showCreateDocumentButton"
                v-tooltip="{
                    message: tooltipCreateDocumentButton,
                    disabled: acl.can('document.viewer') && !isEditing,
                    showOnDisabledElements: true
                }"
                size="small"
                ghost
                :disabled="!acl.can('document.viewer') || isEditing"
                class="sw-order-document-grid-button"
                variant="secondary"
                @click="onShowSelectDocumentTypeModal"
            >

                {% block sw_order_document_card_header_create_document_button_label %}
                {{ $tc('sw-order.documentCard.labelCreateNew') }}
                {% endblock %}

            </mt-button>
        </template>
    </sw-empty-state>
    {% endblock %}
</mt-card>
{% endblock %}
